<template>
  <div class="affiliate">
    <div class="banner">
      <h2 class="title">Become Matelink ambassador<br> and earn up to 15% commission</h2>
      <p class="desc">Great for sex toy blog reviewers, AI chatbot communities, and any<br> sexual wellness-related
        person.</p>
      <p class="btn">Apply Now</p>
    </div>
    <div class="program">
      <div class="cont">
        <h3 class="title">Matelink Affiliate Program</h3>
        <p class="btn">Apply Now</p>
      </div>
    </div>
    <div class="joinUs">
      <h2 class="title">Why join us?</h2>
      <div class="cont">
        <div class="item">
          <div class="picBox">
            <img src="@/assets/images/affiliate_join_pic1.png">
          </div>
          <div class="box">
            <h3 class="name">15% of commission rate</h3>
            <p class="desc">Earn 15% average commission, withdrawable in cash</p>
          </div>
        </div>
        <div class="item">
          <div class="picBox">
            <img src="@/assets/images/affiliate_join_pic2.png">
          </div>
          <div class="box">
            <h3 class="name">30 days<br> window</h3>
            <p class="desc">Earn a commission when your friends or followers make a purchase through your link within 30
              days, even if they return to buy later within that timeframe.</p>
          </div>
        </div>
        <div class="item">
          <div class="picBox">
            <img src="@/assets/images/affiliate_join_pic3.png">
          </div>
          <div class="box">
            <h3 class="name">AI + Sex toy</h3>
            <p class="desc">Featured with AI technology, our product is more competitive worldwide, making earning the
              commission easier.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="works">
      <h2 class="title">How it works?</h2>
      <div class="cont">
        <div class="item">
          <div class="name bg1">Sign up</div>
          <p class="desc">Simply just sign up for our program and fill in the necessary information.</p>
        </div>
        <div class="item">
          <div class="name bg2">Refer</div>
          <p class="desc">Once you sign up, you can create your unique referral link. Share this link on your website,
            social media, or community, or send it directly to your fans. </p>
        </div>
        <div class="item">
          <div class="name bg3">Earn</div>
          <p class="desc">Every purchase made through your link will be counted as a successful referral, and you will
            receive a 15% commission on the sales.</p>
        </div>
      </div>
    </div>
    <img src="@/assets/images/affiliate_banner_middle.png" alt="" class="banner_middle">
    <div class="apply">
      <h2 class="title">Apply</h2>
      <div class="cont">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top" status-icon
          require-asterisk-position="right">
          <el-form-item label="Email" prop="email">
            <el-input v-model="ruleForm.email" />
          </el-form-item>
          <el-form-item label="First Name" prop="first_name">
            <el-input v-model="ruleForm.first_name" />
          </el-form-item>
          <el-form-item label="Last Name" prop="last_name">
            <el-input v-model="ruleForm.last_name" />
          </el-form-item>
          <el-form-item label="Website" prop="website">
            <span class="prefix">https://</span>
            <el-input v-model="ruleForm.website" />
          </el-form-item>
          <el-form-item label="Instagram (type N/A if not applicable)" prop="instagram">
            <span class="prefix">@</span>
            <el-input v-model="ruleForm.instagram" />
          </el-form-item>
          <el-form-item label="TikTok" prop="tiktok">
            <span class="prefix">@</span>
            <el-input v-model="ruleForm.tiktok" />
          </el-form-item>
          <el-form-item label="X" prop="x">
            <span class="prefix">@</span>
            <el-input v-model="ruleForm.x" />
          </el-form-item>
          <el-form-item label="Youtube channel" prop="youtube">
            <span class="prefix">https://youtube.com/</span>
            <el-input v-model="ruleForm.youtube" />
          </el-form-item>
          <el-form-item label="Personal details" prop="details">
            <el-input v-model="ruleForm.details" type="textarea" :rows="5" />
          </el-form-item>
          <div class="submitBox">
            <p @click="submitForm(ruleFormRef)" class="btns">Apply Now</p>
            <p class="desc">Thanks for applying! We will notify you through email once we approve your application. </p>
            <p class="joining">By joining, you agree to the <span>Terms</span> and <span>Privacy Policies</span></p>
          </div>
        </el-form>
      </div>
    </div>
    <div class="faq">
      <h2 class="title">FAQ</h2>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="What is Matelink affiliate program?" name="1">
          <template #icon="{ isActive }">
            <span class="icon-ele">
              <template v-if="isActive">
                <el-icon>
                  <Minus />
                </el-icon>
              </template>
              <template v-else>
                <el-icon>
                  <Plus />
                </el-icon>
              </template>
            </span>
          </template>
          <div>The Matelink affiliate/ambassador program is designed for selected individuals or groups of high-quality
            content
            sites we work with to generate traffic and sales. We offer marketing assets and support to help you connect
            your
            audience with our products. For eligible sales, you can earn commissions. As a member, you will receive an
            email
            newsletter containing updates on new product releases, seasonal promotions, and more.
          </div>
        </el-collapse-item>
        <el-collapse-item title="Who can join?" name="2">
          <template #icon="{ isActive }">
            <span class="icon-ele">
              <template v-if="isActive">
                <el-icon>
                  <Minus />
                </el-icon>
              </template>
              <template v-else>
                <el-icon>
                  <Plus />
                </el-icon>
              </template>
            </span>
          </template>
          <div>Anyone above the legal age requirement (>18) can join. We will review your profile to decide if you are
            eligible.
          </div>
        </el-collapse-item>
        <el-collapse-item title="What does it cost to join?" name="3">
          <template #icon="{ isActive }">
            <span class="icon-ele">
              <template v-if="isActive">
                <el-icon>
                  <Minus />
                </el-icon>
              </template>
              <template v-else>
                <el-icon>
                  <Plus />
                </el-icon>
              </template>
            </span>
          </template>
          <div>The program is free to join, and you can stop participating anytime.
          </div>
        </el-collapse-item>
        <el-collapse-item title="How Much Commission Can I Earn?" name="4">
          <template #icon="{ isActive }">
            <span class="icon-ele">
              <template v-if="isActive">
                <el-icon>
                  <Minus />
                </el-icon>
              </template>
              <template v-else>
                <el-icon>
                  <Plus />
                </el-icon>
              </template>
            </span>
          </template>
          <div>You can earn up to 15% of commission for each toy sale you successfully refer to. And there is no limit
            to the
            total number you can earn, meaning the more you refer, the more you earn.
          </div>
        </el-collapse-item>
        <el-collapse-item title="What does the 30-day attribution window mean?" name="5">
          <template #icon="{ isActive }">
            <span class="icon-ele">
              <template v-if="isActive">
                <el-icon>
                  <Minus />
                </el-icon>
              </template>
              <template v-else>
                <el-icon>
                  <Plus />
                </el-icon>
              </template>
            </span>
          </template>
          <div>A 30-day attribution window means you'll earn a commission if a customer purchases within 30 days of
            clicking
            your link. It still counts even if they return and buy later within those 30 days.
          </div>
        </el-collapse-item>
        <el-collapse-item title="Are there any basic rules?" name="6">
          <template #icon="{ isActive }">
            <span class="icon-ele">
              <template v-if="isActive">
                <el-icon>
                  <Minus />
                </el-icon>
              </template>
              <template v-else>
                <el-icon>
                  <Plus />
                </el-icon>
              </template>
            </span>
          </template>
          <ul class="list">
            <li><span>Legal Requirements</span>: You must meet legal age requirements and adhere to local laws.</li>
            <li><span>No Spamming</span>: You must avoid using spammy tactics to promote links, including but not
              limited to
              putting your affiliate link into coupon sites.</li>
            <li><span>Authentic Traffic</span>: Fake or incentivized clicks and traffic are not allowed.</li>
            <li><span>Prohibited Keywords</span>: Bidding on on our trademarks or product names (even misspellings) in
              any PPC
              platforms (e.g. Google, Bing, etc.) is not allowed.</li>
            <li><span>Legal Responsibilities</span>: You must ensure your website complies with all legal requirements
              and does
              not infringe on third-party rights. You indemnify the Owner from any legal claims about your website or
              actions.
            </li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { addAffiliate } from '@/api/common'
interface RuleForm {
  email: string
  first_name: string
  last_name: string
  website: string
  instagram: string
  tiktok: string
  x: string
  youtube: string
  details: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  email: '',
  first_name: '',
  last_name: '',
  website: '',
  instagram: '',
  tiktok: '',
  x: '',
  youtube: '',
  details: ''
})


const validateEmail = (rule: any, value: string, callback: (arg0: Error | undefined) => void) => {
  const emailRegex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
  if (!value) {
    callback(new Error('Please input email'));
  } else if (!emailRegex.test(value)) {
    callback(new Error('Please enter a valid email address'));
  } else {
    callback(undefined);
  }
};
const rules = reactive<FormRules<RuleForm>>({
  email: [
    { required: true, message: 'Please input email', trigger: 'blur' },
    { validator: validateEmail, trigger: 'blur' }
  ],
  first_name: [
    { required: true, message: 'Please input first name', trigger: 'blur' },
  ],
  last_name: [
    { required: true, message: 'Please input last name', trigger: 'blur' },
  ],
  instagram: [
    { required: true, message: 'Please input instagram', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const res: any = await addAffiliate(ruleForm)
      if (res.code === '000000') {
        ElMessage.success('Application submitted successfully')
      } else {
        ElMessage.error(res.message)
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const activeNames = ref(['1', '2', '3', '4', '5', '6'])
const handleChange = (val: string[]) => {
  console.log(val)
}
</script>
<style lang="scss" scoped>
.affiliate {
  background: #F8F9FC;
  overflow: hidden;

  .banner {
    width: 100%;
    height: 736px;
    background: url('~@/assets/images/affiliate_banner_bg.png') no-repeat;
    background-size: cover;
    overflow: hidden;

    .title {
      font-size: 48px;
      font-weight: 700;
      line-height: 58px;
      text-align: center;
      margin-top: 70px;
    }

    .desc {
      font-size: 24px;
      font-weight: 400;
      line-height: 30px;
      text-align: center;
      margin-top: 24px;
    }

    .btn {
      font-size: 16px;
      font-weight: 400;
      text-align: center;
      background: #846FC1;
      width: 148px;
      height: 44px;
      line-height: 44px;
      border-radius: 80px;
      color: #fff;
      margin: 25px auto 0;
      cursor: pointer;
    }
  }

  .program {
    height: 97px;
    background: #C9BCF0;

    .cont {
      width: 1540px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;

      .title {
        font-size: 32px;
        font-weight: 600;
        line-height: 40px;
      }

      .btn {
        font-size: 16px;
        font-weight: 400;
        text-align: center;
        background: #846FC1;
        width: 148px;
        height: 44px;
        line-height: 44px;
        border-radius: 80px;
        color: #fff;
        cursor: pointer;
      }
    }
  }

  .joinUs {
    width: 1400px;
    margin: 70px auto;

    .title {
      font-size: 48px;
      font-weight: 700;
      line-height: 60px;
      text-align: center;
    }

    .cont {
      display: flex;
      justify-content: space-between;
      padding: 0 60px;
      margin-top: 20px;

      .item {
        .picBox {
          width: 222px;
          height: 216px;
          background: radial-gradient(72.09% 72.09% at 59.3% 27.91%, rgba(188, 172, 252, 0.0468) 0%, rgba(148, 144, 234, 0.0845) 50%, rgba(87, 87, 225, 0.0962) 100%);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 auto;
          margin-bottom: -108px;
          position: relative;

          img {
            width: 192px;
          }
        }

        .box {
          width: 396px;
          height: 472px;
          border-radius: 18px;
          background: #fff;
          padding: 0 40px;
          box-sizing: border-box;
          overflow: hidden;

          .name {
            font-size: 38px;
            font-weight: 700;
            line-height: 48px;
            text-align: center;
            margin-top: 130px;
            min-height: 96px;
          }

          .desc {
            font-size: 24px;
            font-weight: 400;
            line-height: 30px;
            text-align: center;
            color: rgba(0, 0, 0, 0.6);
            margin-top: 30px;
          }
        }
      }
    }
  }

  .works {
    .title {
      font-size: 48px;
      font-weight: 700;
      line-height: 60px;
      text-align: center;
    }

    .cont {
      margin-top: 66px;
      display: flex;
      justify-content: center;

      .item {
        width: 396px;
        margin: 0 3px;

        .name {
          font-size: 54px;
          font-weight: 700;
          line-height: 66px;
          text-align: center;
          height: 364px;
          color: #fff;
          padding-top: 24px;
          box-sizing: border-box;
        }

        .bg1 {
          background: url('~@/assets/images/affiliate_work_pic1.png') no-repeat;
        }

        .bg2 {
          background: url('~@/assets/images/affiliate_work_pic2.png') no-repeat;
        }

        .bg3 {
          background: url('~@/assets/images/affiliate_work_pic3.png') no-repeat;
        }


        .desc {
          font-size: 24px;
          font-weight: 400;
          line-height: 30px;
          text-align: center;
          color: rgba(0, 0, 0, 0.6);
          margin-top: 40px;
          padding: 0 25px;
        }
      }
    }
  }

  .banner_middle {
    display: block;
    width: 1200px;
    margin: 134px auto 70px;
  }

  .apply {
    .title {
      font-size: 54px;
      font-weight: 700;
      line-height: 78px;
      text-align: center;
      margin-bottom: 60px;
    }

    .cont {
      width: 1200px;
      margin: 0 auto;
      background: #EBEBEB;
      box-sizing: border-box;
      padding: 50px 40px;

      :deep(.el-form) {
        .el-form-item__label {
          font-weight: bold;
          color: #000;
          text-transform: uppercase;
        }

        .el-form-item__label:after {
          font-weight: bold;
          color: red;
        }

        .el-form-item__content {
          display: flex;

          .prefix {
            font-size: 16px;
            text-align: center;
            background: #EEEEEE;
            color: #555;
            padding: 0 14px;
            height: 46px;
            line-height: 46px;
            min-width: 80px;
          }

          .el-input {
            flex: 1;
            height: 46px;
          }
        }

        .submitBox {
          text-align: center;

          .btns {
            width: 610px;
            height: 52px;
            border-radius: 5px;
            background: #846FC1;
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            line-height: 52px;
            cursor: pointer;
            margin: 32px auto 0;
          }

          .desc {
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            color: #846FC1;
            margin-top: 15px;
          }

          .joining {
            font-size: 16px;
            font-weight: 600;
            line-height: 26px;
            color: #777777;
            margin-top: 10px;

            span {
              cursor: pointer;
              text-decoration: underline;
              font-weight: 600;
            }
          }
        }
      }
    }
  }

  .faq {
    width: 1270px;
    margin: 0 auto 100px;

    .title {
      font-size: 48px;
      font-weight: 700;
      line-height: 60px;
      text-align: center;
      margin-top: 96px;
    }

    :deep(.el-collapse) {
      border-top: none;

      .el-collapse-item__header {
        background: none;
        justify-content: space-between;
        font-size: 32px;
        font-weight: 700;
        padding: 50px 0;
      }

      .el-collapse-item__wrap {
        background: none;
      }

      .el-collapse-item__content {
        font-size: 26px;
        line-height: 39px;
        font-weight: 400;
        color: #333333;
        padding-bottom: 56px;
      }

      .list {
        list-style-type: auto;

        li {
          font-size: 26px;
          line-height: 40px;
        }

        span {
          font-weight: 600;
        }
      }
    }
  }
}

@media screen and (max-width: 750px) {

  .affiliate {

    .banner {
      height: 9.85rem;
      background: url('~@/assets/images/affiliate_banner_bg_m.png') no-repeat;
      background-size: cover;

      .title {
        font-size: 0.48rem;
        line-height: 0.58rem;
        margin-top: 1.2rem;
        padding: 0 0.5rem;

        br {
          display: none;
        }
      }

      .desc {
        font-size: 0.32rem;
        line-height: 0.4rem;
        margin-top: 0.22rem;
        padding: 0 0.7rem;
      }

      .btn {
        font-size: 0.2rem;
        width: 2.2rem;
        height: 0.64rem;
        line-height: 0.64rem;
        border-radius: 0.32rem;
        margin: 0.42rem auto 0;
      }
    }

    .program {
      height: 0.97rem;

      .cont {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;

        .title {
          font-size: 0.32rem;
          line-height: 0.4rem;
          margin-left: 0.2rem;
        }

        .btn {
          font-size: 0.2rem;
          width: 2.2rem;
          height: 0.64rem;
          line-height: 0.64rem;
          border-radius: 0.32rem;
          margin-right: 0.3rem;
        }
      }
    }

    .joinUs {
      width: 100%;
      margin: 0.7rem auto 0.9rem;

      .title {
        font-size: 0.48rem;
        line-height: 0.6rem;
      }

      .cont {
        display: flex;
        justify-content: space-between;
        padding: 0 0.74rem;
        margin-top: 0.5rem;
        flex-wrap: wrap;

        .item {
          .picBox {
            width: 2.6rem;
            height: 2.54rem;
            margin-bottom: -1.33rem;

            img {
              width: 2.25rem;
            }
          }

          .box {
            width: 6rem;
            height: 5.56rem;
            border-radius: 0.22rem;
            background: #fff;
            padding: 0 0.6rem;

            .name {
              font-size: 0.4rem;
              line-height: 0.6rem;
              margin-top: 1.54rem;
              min-height: auto;
            }

            .desc {
              font-size: 0.28rem;
              line-height: 0.34rem;
              margin-top: 0.38rem;
            }
          }
        }
      }
    }

    .works {
      .title {
        font-size: 0.48rem;
        line-height: 0.6rem;
      }

      .cont {
        margin-top: 0.58rem;
        flex-wrap: wrap;
        padding: 0 0.7rem;

        .item {
          width: 100%;
          margin: 0;

          .name {
            font-size: 0.8rem;
            line-height: 1rem;
            height: 5.5rem;
            padding-top: 0.36rem;
          }

          .bg1 {
            background: url('~@/assets/images/affiliate_work_pic1.png') no-repeat;
            background-size: 100% 100%;
          }

          .bg2 {
            background: url('~@/assets/images/affiliate_work_pic2.png') no-repeat;
            background-size: 100% 100%;
          }

          .bg3 {
            background: url('~@/assets/images/affiliate_work_pic3.png') no-repeat;
            background-size: 100% 100%;
          }


          .desc {
            font-size: 0.28rem;
            line-height: 0.34rem;
            margin-top: 0.38rem;
            padding: 0;
            padding-bottom: 0.7rem;
          }
        }
      }
    }

    .banner_middle {
      display: none;
    }

    .apply {
      .title {
        font-size: 0.48rem;
        line-height: 0.8rem;
        margin-bottom: 0.4rem;
      }

      .cont {
        width: 92%;
        padding: 0.4rem 0.3rem;

        :deep(.el-form) {
          .el-form-item__content {
            .prefix {
              font-size: 0.16rem;
              padding: 0 0.1rem;
              height: 0.46rem;
              line-height: 0.46rem;
              min-width: 0.9rem;
            }

            .el-input {
              flex: 1;
              height: 0.46rem;
            }
          }

          .submitBox {
            text-align: center;

            .btns {
              width: 100%;
              height: 0.7rem;
              border-radius: 0.1rem;
              font-size: 0.28rem;
              line-height: 0.7rem;
              margin: 0.4rem auto 0;
            }

            .desc {
              font-size: 0.16rem;
              line-height: 0.24rem;
              margin-top: 0.3rem;
            }

            .joining {
              font-size: 0.16rem;
              line-height: 0.26rem;
              margin-top: 0.1rem;
            }
          }
        }
      }
    }

    .faq {
      width: 100%;
      margin: 0 auto 0.8rem;
      padding: 0 0.38rem;

      .title {
        font-size: 0.48rem;
        line-height: 0.6rem;
        margin-top: 0.8rem;
      }

      :deep(.el-collapse) {
        .el-collapse-item__header {
          font-size: 0.32rem;
          padding: 0;
          line-height: 0.4rem;
          text-align: left;
        }

        .el-collapse-item__content {
          font-size: 0.24rem;
          line-height: 0.32rem;
          padding-bottom: 0.4rem;
        }

        .list {

          li {
            font-size: 0.26rem;
            line-height: 0.4rem;
          }

        }
      }
    }
  }
}
</style>